<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false" >
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">

      <div class="form-wrap">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item ref="hs" label="户数" prop="hs">
            <a-input-number class="input-number-cx" v-model="form.hs" />
          </a-form-model-item>

          <a-form-model-item ref="gdmj" label="耕地面积" prop="gdmj">
            <a-input-number class="input-number-cx" v-model="form.gdmj" />
          </a-form-model-item>

          <a-form-model-item ref="cmxzs" label="村民小组数" prop="cmxzs">
            <a-input-number class="input-number-cx" v-model="form.cmxzs" />
          </a-form-model-item>

          <a-form-model-item ref="tdlzl" label="土地流转率" prop="tdlzl">
            <a-input-number class="input-number-cx" v-model="form.tdlzl" />
          </a-form-model-item>

          <a-form-model-item ref="details" label="村庄详情" prop="details">
            <a-textarea
              v-model="form.details"
              placeholder=""
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-model-item>

          <a-form-model-item :wrapper-col="{ span: 6, offset: 10 }">
            <a-button type="primary" @click="onSubmit">
              提交
            </a-button>
          </a-form-model-item>

        </a-form-model>

      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { query, edit } from '@/api/intro'
export default {
  data () {
    return {
      labelCol: { span: 10 },
      wrapperCol: { span: 5 },
      other: '',
      form: {
        hs: undefined,
        gdmj: undefined,
        cmxzs: undefined,
        tdlzl: undefined,
        details: ''
      },
      rules: {
        hs: [
          { required: true, message: '请输入户数', trigger: 'blur' }
        ],
        gdmj: [
          { required: true, message: '请输入耕地面积', trigger: 'blur' }
        ],
        cmxzs: [
          { required: true, message: '请输入村民小组数', trigger: 'blur' }
        ],
        tdlzl: [
          { required: true, message: '请输入土地流转率', trigger: 'blur' }
        ],
        details: [
          { required: true, message: '请输入村庄详情', trigger: 'blur' }
        ]
      }
    }
  },
  created: function () {
    query().then(res => {
      console.log(res)
      this.form.hs = res.data.hs
      this.form.gdmj = res.data.gdmj
      this.form.cmxzs = res.data.cmxzs
      this.form.tdlzl = res.data.tdlzl
      this.form.details = res.data.details
    })
    // this.$nextTick(function () {
    // })
  },
  methods: {
    onSubmit () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          edit(this.form).then(res => {
            console.log(res)
            this.$message.success('修改成功')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm () {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style scoped>
.input-number-cx {
  width: 100%;
}
</style>
